<template>
  <div
    class="floating-navbar"
    ref="navbarRef"
    :style="{
      top: position.y + 'px',
      left: position.x + 'px',
      transform: isDragging ? 'scale(1.05)' : 'scale(1)'
    }"
    :class="{ 'is-dragging': isDragging, 'is-hide': aiShow }"
    @mousedown="startDrag"
  >
    <!-- 拖拽指示器 -->
    <div class="bottom-decoration"></div>

    <el-tooltip class="nav-item" effect="dark" content="手动创建任务" placement="left">
      <div @click.stop="showAi" class="nav-icon manual-icon">
        <el-image :src="SImg" class="icon-img" />
        <div class="icon-glow"></div>
      </div>
    </el-tooltip>

    <!-- 底部装饰 -->
    <div class="bottom-decoration"></div>
  </div>

  <Panel ref="panelRef" />
  <HandPanel ref="handPanelRef" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Panel from './panel.vue'
import HandPanel from './handPanel.vue'
import SImg from '@/assets/img/sdcj.png'
import { emitter } from '@/utils/eventBus'

const panelRef = ref(null)
const handPanelRef = ref(null)
const navbarRef = ref(null)
const position = ref({ x: window.innerWidth - 80, y: window.innerHeight * 0.68 })
const isDragging = ref(false)
const aiShow = ref(false)

let dragOffset = { x: 0, y: 0 }
let animationId = null

emitter.on('showAiBtn', () => {
  aiShow.value = false
})
const showAi = () => {
  emitter.emit('aiDialog', true)
  aiShow.value = true
}

// 边界限制函数
const constrainPosition = (x, y) => {
  const navbar = navbarRef.value
  if (!navbar) return { x, y }

  const rect = navbar.getBoundingClientRect()
  const maxX = window.innerWidth - rect.width
  const maxY = window.innerHeight - rect.height

  return {
    x: Math.max(0, Math.min(x, maxX)),
    y: Math.max(0, Math.min(y, maxY))
  }
}

// 平滑拖拽函数
const smoothDrag = (targetX, targetY) => {
  const constrained = constrainPosition(targetX, targetY)
  position.value = constrained
}

const startDrag = (e) => {
  // 防止在图标上开始拖拽
  if (e.target.closest('.nav-icon')) return

  isDragging.value = true
  const rect = navbarRef.value.getBoundingClientRect()
  dragOffset.x = e.clientX - rect.left
  dragOffset.y = e.clientY - rect.top

  // 添加全局事件监听
  document.addEventListener('mousemove', onDrag, { passive: true })
  document.addEventListener('mouseup', stopDrag)

  // 防止文本选择
  e.preventDefault()
  document.body.style.userSelect = 'none'
}

const onDrag = (e) => {
  if (!isDragging.value) return

  // 使用 requestAnimationFrame 优化性能
  if (animationId) {
    cancelAnimationFrame(animationId)
  }

  animationId = requestAnimationFrame(() => {
    const newX = e.clientX - dragOffset.x
    const newY = e.clientY - dragOffset.y
    smoothDrag(newX, newY)
  })
}

const stopDrag = () => {
  isDragging.value = false

  // 移除事件监听
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)

  // 恢复文本选择
  document.body.style.userSelect = ''

  // 清理动画
  if (animationId) {
    cancelAnimationFrame(animationId)
    animationId = null
  }

  // 边缘吸附效果
  const threshold = 50
  const constrained = constrainPosition(position.value.x, position.value.y)

  if (constrained.x < threshold) {
    constrained.x = 10
  } else if (constrained.x > window.innerWidth - 80) {
    constrained.x = window.innerWidth - 70
  }

  position.value = constrained
}

// 窗口大小改变时重新计算位置
const handleResize = () => {
  position.value = constrainPosition(position.value.x, position.value.y)
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
.floating-navbar {
  position: fixed;
  width: 60px;
  padding: 12px 0 8px 0;
  z-index: 9999;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f0f7ff 100%);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0, 82, 204, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 82, 204, 0.1);
}

.floating-navbar:hover {
  box-shadow:
    0 12px 40px rgba(0, 82, 204, 0.2),
    0 6px 20px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #e8f4ff 100%);
}

.floating-navbar.is-dragging {
  cursor: grabbing;
  box-shadow:
    0 16px 48px rgba(0, 82, 204, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease;
  background: linear-gradient(135deg, #f8faff 0%, #e8f4ff 50%, #d6edff 100%);
}

.drag-indicator {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}

.drag-dots {
  display: flex;
  gap: 3px;
}

.drag-dots span {
  width: 4px;
  height: 4px;
  background: rgba(0, 82, 204, 0.4);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.floating-navbar:hover .drag-dots span {
  background: rgba(0, 82, 204, 0.7);
  transform: scale(1.2);
}

.nav-item {
  width: 100%;
  display: flex;
  justify-content: center;
}

.nav-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 82, 204, 0.1);
  overflow: hidden;
}

.nav-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 204, 0.1), transparent);
  transition: left 0.5s ease;
}

.nav-icon:hover::before {
  left: 100%;
}

.nav-icon:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 82, 204, 0.15);
  border-color: rgba(0, 82, 204, 0.2);
}

.ai-icon:hover {
  background: linear-gradient(135deg, rgba(0, 82, 204, 0.1), rgba(64, 158, 255, 0.1));
  border-color: rgba(0, 82, 204, 0.3);
}

.manual-icon:hover {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 165, 0, 0.1));
  border-color: rgba(255, 140, 0, 0.3);
}

.icon-img {
  width: 28px;
  height: 28px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.nav-icon:hover .icon-img {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(0, 82, 204, 0.2), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}

.nav-icon:hover .icon-glow {
  transform: translate(-50%, -50%) scale(2);
}

.bottom-decoration {
  width: 30px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 204, 0.3), transparent);
  border-radius: 2px;
  margin-top: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-navbar {
    width: 50px;
    padding: 10px 0 6px 0;
  }

  .nav-icon {
    width: 38px;
    height: 38px;
  }

  .icon-img {
    width: 24px;
    height: 24px;
  }
}

/* 浅色主题适配 */
@media (prefers-color-scheme: light) {
  .floating-navbar {
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f0f7ff 100%);
    border-color: rgba(0, 82, 204, 0.1);
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .floating-navbar {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 4px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .drag-dots span {
    background: rgba(255, 255, 255, 0.4);
  }

  .nav-icon {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .bottom-decoration {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  }
}
.is-hide {
  display: none;
}
</style>
